<template>
  <div class="container">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <div class="top-box">
      <!-- 头部搜索部分 -->
      <div class="top-search">
        <div class="button" style="position:relative;">
          <input
            class="search-btn fs-28"
            placeholder="搜索音乐"
            @focus="changeContent"
            v-model.trim="keyWord"
            type="search"
            @keypress="monitorSearch"
          />
          <img class="search-icon" v-show="!isInput && keyWord == ''" :src="searchPic" alt />
          <img
            class="delete-icon"
            v-show="isInput || keyWord != ''"
            :src="searchPic"
            @click="searchMes"
            alt
          />
        </div>
        <!-- 搜索提示框 -->
        <!-- <div class="search-tip-box" @click.stop="hiddenTip" v-if="isInput">
          <div class="search-tip" v-if="isInput">
            <div class="item" v-for="item in searchTip" :key="item.id" @click="searchMes">
              <span class="txt fs-26">{{item.content}}</span>
              <img class="search-icon2" :src="searchPic" alt style="width:0.3rem;" />
            </div>
          </div>
        </div> -->
      </div>
      <!-- 头部导航部分 -->
      <div class="header-nav">
        <div class="nav-list">
          <div
            class="item"
            v-for="(item,index) in headerNav"
            :key="index"
            :class="{active:item.id == navIndex}"
            @click="checkType(item.id)"
          >
            <div class="text fs-32" :class="{active:item.id == navIndex}">{{item.text}}</div>
            <div class="line" v-show="item.id == navIndex"></div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="no-data-tip"
          v-if="navIndex == 1 && noSearchResult "
        >未查询到与 &nbsp;{{this.keyWord}} &nbsp;相关的内容</div>
        <div
          class="no-data-tip"
          v-if="navIndex == 2 && !musicList"
        >未查询到与 &nbsp;{{this.keyWord}} &nbsp;相关的内容</div>
        <div
          class="no-data-tip"
          v-if="navIndex == 3 && !videoList"
        >未查询到与 &nbsp;{{this.keyWord}} &nbsp;相关的内容</div>
        <div
          class="no-data-tip"
          v-if="navIndex == 4 && !singerList"
        >未查询到与 &nbsp;{{this.keyWord}} &nbsp;相关的内容</div>
        <div
          class="no-data-tip"
          v-if="navIndex == 5 && !albumList"
        >未查询到与 &nbsp;{{this.keyWord}} &nbsp;相关的内容</div>
        <div
          class="no-data-tip"
          v-if="navIndex == 6 && !songSheetList"
        >未查询到与 &nbsp;{{this.keyWord}} &nbsp;相关的内容</div>
        <div
          class="no-data-tip"
          v-if="navIndex == 7 && !userList"
        >未查询到与 &nbsp;{{this.keyWord}} &nbsp;相关的内容</div>
        <div
          class="no-data-tip"
          v-if="navIndex == 8 && !radioList"
        >未查询到与 &nbsp;{{this.keyWord}} &nbsp;相关的内容</div>
      </div>
      <!-- 单曲部分 -->
      <div class="song" v-if="musicList">
        <div class="title" v-show="navIndex == 1 ">
          <div class="left">
            <span class="fs-32">单曲</span>
            <img :src="rightArrow" :class="{closed:musicType}" alt @click="changeStatus(1)" />
          </div>
          <!-- <div class="right">
          <div class="img">
            <img :src="playAll" alt />
          </div>
          <span class="fs-24">播放全部</span>
          </div>-->
        </div>
        <div class="song-list" v-show="musicType">
          <div
            class="items"
            v-for="(item,index) in musicList"
            :key="index"
            @click="toSonDetail(item)"
          >
            <div class="left">
              <div class="song-name fs-32">{{item.music_name}}</div>
              <div class="singer-name fs-26">
                {{item.singer_name}} -
                <span class="name fs-26">{{item.music_name}}</span>
              </div>
            </div>
            <div class="right">
              <!-- <div class="img-play">
                <img :src="playSong" alt />
              </div>-->
              <div class="img-more" @click.stop="toShowModel(item)">
                <img :src="moreMes" alt />
              </div>
            </div>
          </div>
          <div class="look-more" v-show="navIndex == 1">
            <span @click="checkType(2)">查看全部{{musicTotal}}首同名歌曲 ></span>
          </div>
        </div>
      </div>

      <!--视频部分 -->
      <div class="video" v-if="videoList">
        <div class="title" v-show="navIndex == 1">
          <div class="left">
            <span class="fs-32">视频</span>
            <img :src="rightArrow" :class="{closed:videoType}" alt @click="changeStatus(2)" />
          </div>
        </div>
        <div class="video-list" v-show="videoType">
          <div
            class="items"
            v-for="(item,index) in videoList"
            :key="index"
            @click="toVideoDetail(item.dynamics_id)"
          >
            <div class="left">
              <div class="video-box">
                <video :src="item.video_url" :poster="item.video_cover"></video>
              </div>
              <div class="video-mes">
                <div class="img">
                  <img :src="playSmall" alt />
                </div>
                <span class="fs-20">28万</span>
              </div>
            </div>
            <div class="right">
              <div class="top">
                <div class="mes fs-32">
                  <span class="name fs-32"></span>
                  <span class="content">{{item.content}}</span>
                </div>
              </div>
              <div class="bottom">
                <span class="time fs-22">{{item.created_at}}</span>
                <span class="singer-name fs-24">{{item.nickname}}</span>
              </div>
            </div>
          </div>
          <div class="look-more" v-show="navIndex == 1">
            <span @click="checkType(3)">查看全部{{videoTotal}}个视频 ></span>
          </div>
        </div>
      </div>

      <!-- 专辑部分 -->
      <div class="album" v-if="albumList">
        <div class="title" v-show="navIndex == 1">
          <div class="left">
            <span class="fs-32">专辑</span>
            <img :src="rightArrow" :class="{closed:albumType}" alt @click="changeStatus(3)" />
          </div>
        </div>
        <div class="album-list" v-show="albumType">
          <div
            class="items"
            v-for="(item,index) in albumList"
            :key="index"
            @click="toAblumDetail(item.music_list_id)"
          >
            <div class="left">
              <div class="img">
                <img :src="item.music_list_photo" alt />
              </div>
            </div>
            <div class="right">
              <div class="top fs-32">{{item.music_list_name}}</div>
              <div class="bottom fs-22">
                <span class="name fs-22"></span>
                {{item.singer_artistic_name}}
              </div>
            </div>
          </div>
          <div class="look-more" v-show="navIndex == 1">
            <span @click="checkType(4)">查看全部{{albumTotal}}个专辑 ></span>
          </div>
        </div>
      </div>

      <!-- 电台部分 -->
      <div class="radio" v-if="radioList">
        <div class="title" v-show="navIndex == 1">
          <div class="left">
            <span class="fs-32">电台</span>
            <img :src="rightArrow" :class="{closed:radioType}" alt @click="changeStatus(4)" />
          </div>
        </div>
        <div class="radio-list" v-show="radioType">
          <div class="items" v-for="(item,index) in radioList" :key="index">
            <div class="left">
              <div class="img">
                <img :src="item.radio_cover" alt />
              </div>
            </div>
            <div class="right">
              <div class="top fs-32">
                <span class="name fs-32">{{item.radio_name}}</span>
              </div>
              <div class="bottom fs-22">{{item.radio_desc}}</div>
            </div>
          </div>
          <div class="look-more" v-show="navIndex == 1">
            <span @click="checkType(5)">查看全部{{radioTotal}}个电台 ></span>
          </div>
        </div>
      </div>

      <!-- 歌单部分 -->
      <div class="song-sheet" v-if="songSheetList">
        <div class="title" v-show="navIndex == 1">
          <div class="left">
            <span class="fs-32">歌单</span>
            <img :src="rightArrow" :class="{closed:songSheetType}" alt @click="changeStatus(5)" />
          </div>
        </div>
        <div class="song-sheet-list" v-show="songSheetType">
          <div
            class="items"
            v-for="(item,index) in songSheetList"
            :key="index"
            @click="toSongIndex(item)"
          >
            <div class="left">
              <div class="img">
                <img :src="item.song_sheet_photo" alt />
              </div>
            </div>
            <div class="right">
              <div class="top fs-32">
                <span class="name fs-32"></span>
                <span>{{item.song_sheet_name}}</span>
              </div>
              <div class="bottom fs-22">{{item.music_num}}首, 播放{{item.run_num}}次</div>
            </div>
          </div>
          <div class="look-more" v-show="navIndex == 1">
            <span @click="checkType(6)">查看全部{{songSheetTotal}}个歌单 ></span>
          </div>
        </div>
      </div>

      <!-- 歌手部分 -->
      <div class="singer" v-if="singerList">
        <div class="title" v-show="navIndex == 1">
          <div class="left">
            <span class="fs-32">歌手</span>
            <img :src="rightArrow" :class="{closed:singerType}" alt @click="changeStatus(6)" />
          </div>
        </div>
        <div class="singer-list" v-show="singerType">
          <div
            class="items"
            v-for="(item,index) in singerList"
            :key="index"
            @click="checkSinger(item.singer_id)"
          >
            <div class="left">
              <div class="img">
                <img :src="item.singer_avator" alt />
              </div>
              <span class="fs-32">{{item.singer_artistic_name}}</span>
            </div>
          </div>
          <div class="look-more" v-show="navIndex == 1">
            <span @click="checkType(7)">查看全部{{singerTotal}}个歌手 ></span>
          </div>
        </div>
      </div>

      <!-- 用户部分 -->
      <div class="user" v-if="userList">
        <div class="title" v-show="navIndex == 1">
          <div class="left">
            <span class="fs-32">用户</span>
            <img :src="rightArrow" :class="{closed:userType}" alt @click="changeStatus(7)" />
          </div>
        </div>
        <div class="user-list" v-show="userType">
          <div class="items" v-for="(item,index) in userList" :key="index">
            <div class="left">
              <div class="img">
                <img :src="item.user_avator" alt />
                <!-- <img :src="vip" alt class="vip" /> -->
              </div>
              <div class="text">
                <span class="name fs-32">{{item.nickname}}</span>
                <span class="desc fs-24">{{item.write_name}}</span>
              </div>
            </div>
            <div class="concern fs-24" @click="concernPerson(item.user_id)">
              <img v-show="item.is_attention == 0" :src="follow" alt />
              <img v-show="item.is_attention == 1" :src="followed" alt />
            </div>
          </div>
          <div class="look-more" v-show="navIndex == 1">
            <span @click="checkType(8)">查看全部{{userTotal}}个用户 ></span>
          </div>
        </div>
      </div>
    </div>
    <songMore :showSongMore="showSongMore" :musicObject="musicObject" @fn="getSongMoreStatus"></songMore>
    <!-- <player :isFull="store.isFullPlay"></player> -->
  </div>
</template>

<script>
// 节流函数
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();
export default {
  name: "search-result",
  data() {
    return {
      store: this.getStore(),
      isFollow: false,
      keyWord: "", //搜索关键字
      isFocus: false,
      isInput: false,
      title: "搜索",
      isBack: true,
      navIndex: 1,
      follow: require("@/assets/index/follow.png"),
      followed: require("@/assets/index/followed.png"),
      searchPic: require("@/assets/index/search-gray.png"),
      closePic: require("@/assets/index/close.png"),
      playAll: require("@/assets/index/play-search-g.png"),
      playSong: require("@/assets/index/play-search.png"),
      playSmall: require("@/assets/index/play-search-s.png"),
      rightArrow: require("@/assets/index/back-pic.png"),
      moreMes: require("@/assets/index/moreMes.png"),
      vip: require("@/assets/index/vip.png"),
      headerNav: [
        {
          id: 1,
          text: "综合"
        },
        {
          id: 2,
          text: "单曲"
        },
        {
          id: 3,
          text: "视频"
        },
        {
          id: 4,
          text: "歌手"
        },
        {
          id: 5,
          text: "专辑"
        },
        {
          id: 6,
          text: "歌单"
        },
        {
          id: 7,
          text: "用户"
        },
        {
          id: 8,
          text: "电台"
        }
      ], //头部导航栏数据
      searchTip: [
        {
          id: 1,
          content: ""
        }
      ],
      type: 1, //1默认表示综合
      musicList: [], //音乐列表
      musicTotal: null, //音乐总数
      musicTotal: null,
      videoTotal: null,
      albumTotal: null,
      radioTotal: null,
      songSheetTotal: null,
      singerTotal: null,
      userTotal: null,
      musicType: true, //音乐列表显示状态
      videoList: [], //视频列表
      videoType: true, //视屏列表显示状态
      albumList: [],
      albumType: true,
      radioList: [],
      radioType: true,
      songSheetList: [],
      songSheetType: true,
      singerList: [],
      singerType: true,
      userList: [],
      userType: true,
      noSearchResult: false,
      musicMes: null,
      playingList: [],
      musicObject: {}, //音乐信息
      showSongMore: false //展示歌曲更多模态框
    };
  },
  watch: {
    keyWord() {
      delay(() => {
        this.isInput = true;
        this.searchTip[0].content = "搜索~" + this.keyWord;
        if (this.keyWord == "") {
          this.isInput = false;
        }
      }, 0);
    }
  },
  components: {},
  methods: {
    // 获取歌曲更多模态框的状态
    getSongMoreStatus(e) {
      this.showSongMore = e;
    },
    // 展开歌曲更多模态框
    toShowModel(item) {
      this.musicObject = item;
      this.showSongMore = true;
    },
    // 改变列表的显示状态
    changeStatus(num) {
      if (num == 1) {
        // 单曲
        this.musicType = !this.musicType;
      } else if (num == 2) {
        // 视频
        this.videoType = !this.videoType;
      } else if (num == 3) {
        // 歌手
        this.singerType = !this.singerType;
      } else if (num == 4) {
        // 专辑
        this.albumType = !this.albumType;
      } else if (num == 5) {
        // 歌单
        this.songSheetType = !this.songSheetType;
      } else if (num == 6) {
        // 用户
        this.userType = !this.userType;
      } else if (num == 7) {
        // 电台
        this.radioType = !this.radioType;
      }
      this.$forceUpdate();
    },
    // 去歌曲播放页面
    toSonDetail(item) {
      // 是单曲  传 music_from   1
      console.log(item.music_id, "---music_id");
      this.store.setData(item.music_id, 1);
      this.getSongSheetPlayingList(item.music_id);
    },
    // 获取歌单列表的播放列表
    getSongSheetPlayingList(id) {
      const url =
        this.$host1 + `home/musicMainMsg?music_id=` + id + `&music_from=` + 1;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data, "---res.data.data--");
          if (res.data.code == 200) {
            this.playingList = res.data.data.list;
            this.store.playingList = this.playingList;
            window.localStorage.setItem(
              "playingList",
              JSON.stringify(this.playingList)
            );
            this.store.isPlay = true;
            this.store.isFullPlay = true;
          } else {
            this.AlertWin(res.data.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 跳转到歌曲列表页
    toSongIndex(item) {
      this.$router.push({
        path: "/index/song-sheet",
        query: { id: item.song_sheet_id, sheetStatus: 1 }
      });
    },
    // 跳转到专辑详情页
    toAblumDetail(id) {
      this.$router.push({
        path: "/index/album-detail",
        query: { id: id }
      });
    },
    // 选择歌手 去歌手主页
    checkSinger(id) {
      this.$router.push({
        path: "/index/song-sheet",
        query: { id: id, sheetStatus: 2, isSinger: this.isSinger }
      });
    },
    // 去视频详情页面
    toVideoDetail(id) {
      this.$router.push({
        path: "/index/video-Detail",
        query: { id: id }
      });
    },
    // 搜索内容
    searchMes() {
      this.getSearchResult();
    },
    // 获取搜索结果
    getSearchResult() {
      if (this.keyWord == "") {
        this.AlertWin("请输入搜索内容");
        return;
      }
      const url = this.$host1 + `home/search/search`;
      var params = {
        search: this.keyWord,
        type: this.type
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            let data = res.data.data;
            this.musicList = data.music_list;
            this.musicTotal = data.music_list_count;
            this.videoList = data.video_list;
            this.videoTotal = data.video_list_count;
            this.albumList = data.music_list_list;
            this.albumTotal = data.music_list_list_count;
            this.radioList = data.radio_list;
            this.radioTotal = data.radio_list_count;
            this.songSheetList = data.song_sheet_list;
            this.songSheetTotal = data.song_sheet_list_count;
            this.singerList = data.singer_list;
            this.singerTotal = data.singer_list_count;
            this.userList = data.user_list;
            this.userTotal = data.user_list_count;
            if (
              !this.musicList &&
              !this.videoList &&
              !this.albumList &&
              !this.radioList &&
              !this.songSheetList &&
              !this.singerList &&
              !this.userList
            ) {
              this.noSearchResult = true;
            } else {
              this.noSearchResult = false;
            }
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 选择头部导航类型
    checkType(id) {
      // console.log(id, "---id");
      this.navIndex = id;
      this.type = id;
      this.getSearchResult();
    },
    changeContent() {
      // 让input搜索图片和placeholder文本内容一起消失
      if (this.keyWord != "") {
        this.isInput = true;
      }
    },
    // 清空搜索框内容
    clearContent() {
      this.keyWord = "";
    },
    // 隐藏搜索提示框
    hiddenTip() {
      this.isInput = false;
    },
    // 关注某人
    concernPerson(id) {
      const url = this.$host1 + `home/friend/eachAttention`;
      var params = {
        user_love_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSearchResult();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 监听软键盘搜素事件
    monitorSearch(e) {
      var keycode = e.keyCode;
      if (keycode == "13") {
        e.preventDefault();
        //请求搜索接口
        if (this.keyWord == "") {
          this.AlertWin("请输入搜索内容！");
        } else {
          this.getSearchResult();
        }
      }
    }
  },
  created() {
    this.keyWord = this.$route.query.keyWord;
    this.getSearchResult();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  // padding-top: 3rem;
  height: 100%;
  padding-bottom: 1rem;
  box-sizing: border-box;
  .top-box {
    width: 100%;
    position: fixed;
    left: 0;
    top: 1rem;
    z-index: 999;
    background-color: #fff;
  }
  // 头部搜索按钮
  .top-search {
    width: 100%;
    padding: 0.25rem 0.25rem 0;
    box-sizing: border-box;
    background-color: #fff;
    input::-webkit-input-placeholder {
      text-align: center;
    }
    input[type="search"]::-webkit-search-cancel-button {
      -webkit-appearance: none; //此处去掉默认的小×
    }
    .search-btn {
      position: relative;
      width: 7rem;
      height: 0.58rem;
      line-height: 0.58rem;
      border-radius: 0.29rem;
      font-size: 0.28rem;
      font-weight: 400;
      color: #444;
      text-indent: 0.5rem;
      border: 0.015rem solid rgba(221, 221, 221, 1);
    }
    .search-icon {
      position: absolute;
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.3rem;
      left: 39%;
      top: 0.2rem;
    }
    .delete-icon {
      right: 0;
      position: absolute;
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.3rem;
      top: 0.15rem;
    }
    .search-tip-box {
      position: absolute;
      top: 0.9rem;
      left: 0;
      width: 100%;
      height: 78vh;
      background-color: rgba(255, 255, 255, 0.1);
      // 搜索提示框样式
      .search-tip {
        position: absolute;
        z-index: 99;
        // top: 0.9rem;
        top: 0;
        left: 0.4rem;
        width: 90%;
        border-radius: 0.15rem;
        box-shadow: 0.1rem 0.1rem 0.21rem #eee;
        background-color: rgba(245, 245, 245, 1);
        .item {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          height: 0.8rem;
          line-height: 0.8rem;
          border-bottom: 0.01rem solid #eee;
          padding-left: 0.8rem;
          .txt {
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
          }
          .search-icon2 {
            position: absolute;
            left: 0.3rem;
            top: 0.25rem;
            img {
              width: 0.3rem;
            }
          }
        }
      }
    }
  }

  // 头部导航分类样式设置
  .header-nav {
    width: 100%;
    height: 1.02rem;
    line-height: 1.02rem;
    background-color: #fff;
    .nav-list {
      height: 1.02rem;
      padding: 0 0.24rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;
      align-items: center;
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      .item {
        width: auto;
        margin-right: 0.64rem;
        height: 100%;
        position: relative;
        .text {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
        }
        .line {
          position: absolute;
          width: 100%;
          left: 0;
          bottom: 0;
          height: 0.05rem;
          border-radius: 0.03rem;
          background-color: #540479;
        }
      }
      .active {
        font-size: 0.36rem !important;
        font-weight: 800 !important;
        color: #540479 !important;
      }
    }
    .nav-list::-webkit-scrollbar {
      display: none;
    }
  }

  .no-data-tip {
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    color: #999;
    font-size: 0.2rem;
  }

  // 单曲数据展示样式
  .song {
    .title {
      width: 100%;
      height: 0.9rem;
      padding: 0 0.25rem 0 0.27rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          margin-right: 0.17rem;
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
        }
        img {
          margin-top: -0.03rem;
          width: 0.16rem;
          height: 0.26rem;
        }
        .closed {
          transform: rotate(90deg);
        }
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 1.56rem;
        height: 0.42rem;
        background: rgba(255, 255, 255, 1);
        border: 0.015rem solid rgba(153, 153, 153, 1);
        border-radius: 0.21rem;
        .img {
          width: 0.24rem;
          height: 0.24rem;
          border-radius: 50%;
          img {
            width: 100%;
          }
        }
        span {
          font-weight: 400;
          color: rgba(68, 68, 68, 1);
        }
      }
    }
    .song-list {
      background-color: #fff;
      .items {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.32rem 0.25rem 0.32rem 0.28rem;
        box-sizing: border-box;
        border-bottom: 0.01rem solid rgba(245, 245, 245, 1);
        .left {
          .song-name {
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
            margin-bottom: 0.2rem;
          }
          .singer-name {
            font-weight: 400;
            color: rgba(56, 117, 209, 1);
            .name {
              color: #999999;
            }
          }
        }
        .right {
          display: flex;
          .img-play {
            width: 0.33rem;
            height: 0.33rem;
            img {
              width: 100%;
            }
          }
          .img-more {
            width: 0.07rem;
            height: 0.3rem;
            margin-left: 0.54rem;
            img {
              width: 100%;
            }
          }
        }
      }
    }
    .look-more {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #999;
    }
  }

  // 视频样式部分
  .video {
    .title {
      width: 100%;
      height: 0.9rem;
      padding: 0 0.25rem 0 0.27rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          margin-right: 0.17rem;
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
        }
        img {
          margin-top: -0.03rem;
          width: 0.16rem;
          height: 0.26rem;
        }
        .closed {
          transform: rotate(90deg);
        }
      }
    }
    .video-list {
      background-color: #fff;
      .items {
        position: relative;
        padding: 0.15rem 0.25rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 0.01rem solid #f5f5f5;
        .left {
          position: relative;
          width: 2.2rem;
          height: 1.5rem;
          border-radius: 0.12rem;
          overflow: hidden;
          background-color: #eee;
          .video-box {
            video {
              width: 100%;
              height: 100%;
            }
          }
          .video-mes {
            position: absolute;
            right: 0.1rem;
            top: 0.1rem;
            display: flex;
            align-items: center;
            .img {
              width: 0.12rem;
              height: 0.16rem;
              margin-right: 0.05rem;
              img {
                width: 100%;
              }
            }
            span {
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
            }
          }
        }

        .right {
          width: 4.43rem;
          margin-top: 0.15rem;
          .top {
            margin-bottom: 0.27rem;
            .mes {
              font-weight: 500;
              color: #444;
              .name {
                color: #3875d1;
              }
              .content {
                white-space: wrap;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
            }
          }
          .bottom {
            .time {
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
            }
            .singer-name {
              font-weight: 500;
              color: rgba(56, 117, 209, 1);
            }
          }
        }
      }
    }
    .look-more {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #999;
    }
  }

  // 专辑部分
  .album {
    .title {
      width: 100%;
      height: 0.9rem;
      padding: 0 0.25rem 0 0.27rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          margin-right: 0.17rem;
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
        }
        img {
          margin-top: -0.03rem;
          width: 0.16rem;
          height: 0.26rem;
        }
        .closed {
          transform: rotate(90deg);
        }
      }
    }
    .album-list {
      background-color: #fff;
      .items {
        display: flex;
        padding: 0.15rem 0.25rem;
        box-sizing: border-box;
        background-color: #fff;
        .left {
          margin-right: 0.35rem;
          .img {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 0.12rem;
            overflow: hidden;
            background-color: #eee;
            img {
              width: 100%;
            }
          }
        }
        .right {
          margin-top: 0.35rem;
          .top {
            width: 4.76rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
            margin-bottom: 0.27rem;
          }
          .bottom {
            font-weight: 400;
            color: rgba(68, 68, 68, 1);
            .name {
              color: #3875d1;
            }
          }
        }
      }
    }
    .look-more {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #999;
    }
  }

  // 电台部分
  .radio {
    .title {
      width: 100%;
      height: 0.9rem;
      padding: 0 0.25rem 0 0.27rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          margin-right: 0.17rem;
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
        }
        img {
          margin-top: -0.03rem;
          width: 0.16rem;
          height: 0.26rem;
        }
        .closed {
          transform: rotate(90deg);
        }
      }
    }
    .radio-list {
      background-color: #fff;
      .items {
        display: flex;
        padding: 0.15rem 0.25rem;
        box-sizing: border-box;
        background-color: #fff;
        .left {
          margin-right: 0.35rem;
          .img {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 0.12rem;
            overflow: hidden;
            background-color: #eee;
            img {
              width: 100%;
            }
          }
        }
        .right {
          margin-top: 0.35rem;
          .top {
            width: 4.76rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
            margin-bottom: 0.27rem;
            .name {
              font-weight: 500;
              color: rgba(56, 117, 209, 1);
            }
          }
          .bottom {
            font-weight: 400;
            color: #999999;
            .name {
              color: #3875d1;
            }
          }
        }
      }
    }
    .look-more {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #999;
    }
  }

  // 歌单部分
  .song-sheet {
    .title {
      width: 100%;
      height: 0.9rem;
      padding: 0 0.25rem 0 0.27rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          margin-right: 0.17rem;
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
        }
        img {
          margin-top: -0.03rem;
          width: 0.16rem;
          height: 0.26rem;
        }
        .closed {
          transform: rotate(90deg);
        }
      }
    }
    .song-sheet-list {
      background-color: #fff;
      .items {
        display: flex;
        padding: 0.15rem 0.25rem;
        box-sizing: border-box;
        background-color: #fff;
        .left {
          margin-right: 0.35rem;
          .img {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 0.12rem;
            overflow: hidden;
            // background-color: #eee;
            img {
              width: 100%;
            }
          }
        }
        .right {
          margin-top: 0.21rem;
          .top {
            width: 4.76rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
            margin-bottom: 0.27rem;
            .name {
              font-weight: 500;
              color: rgba(56, 117, 209, 1);
            }
          }
          .bottom {
            font-weight: 400;
            color: #999999;
            .name {
              color: #3875d1;
            }
          }
        }
      }
    }
    .look-more {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #999;
    }
  }

  // 歌手部分
  .singer {
    .title {
      width: 100%;
      height: 0.9rem;
      padding: 0 0.25rem 0 0.27rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          margin-right: 0.17rem;
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
        }
        img {
          margin-top: -0.03rem;
          width: 0.16rem;
          height: 0.26rem;
        }
        .closed {
          transform: rotate(90deg);
        }
      }
    }
    .singer-list {
      background-color: #fff;
      .items {
        padding: 0.15rem 0.3rem;
        box-sizing: border-box;
        .left {
          display: flex;
          align-items: center;
          .img {
            width: 0.9rem;
            height: 0.9rem;
            margin-right: 0.26rem;
            border-radius: 50%;
            overflow: hidden;
            background-color: #eee;
            img {
              width: 100%;
            }
          }
          span {
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
          }
        }
      }
    }
    .look-more {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #999;
    }
  }

  // 用户部分
  .user {
    .title {
      width: 100%;
      height: 0.9rem;
      padding: 0 0.25rem 0 0.27rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          margin-right: 0.17rem;
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
        }
        img {
          margin-top: -0.03rem;
          width: 0.16rem;
          height: 0.26rem;
        }
        .closed {
          transform: rotate(90deg);
        }
      }
    }
    .user-list {
      background-color: #fff;
      .items {
        padding: 0.26rem 0.3rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-bottom: 0.01rem solid rgba(234, 234, 234, 1);
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .img {
            position: relative;
            width: 0.9rem;
            height: 0.9rem;
            margin-right: 0.26rem;
            border-radius: 50%;
            overflow: hidden;
            background-color: #eee;
            img {
              width: 100%;
            }
            img.vip {
              width: 0.32rem;
              height: 0.32rem;
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }
          .text {
            display: flex;
            flex-direction: column;
            .name {
              font-weight: 500;
              color: #444;
              margin-bottom: 0.15rem;
            }
            .desc {
              width: 4.2rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
          }
        }
        .concern {
          width: 1.18rem;
          height: 0.5rem;
          color: rgba(255, 255, 255, 1);
          margin-left: 0.16rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .look-more {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #999;
    }
  }
}
</style>
